<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head >
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width"/>
    <link rel="shortcut icon" th:href="@{/image/favicon.ico}" type="image/x-icon"/>

    <title>文章阅读</title>
    <link rel="stylesheet" th:href="@{/font-awesome/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <link rel="stylesheet" th:href="@{/css/master.css}"/>
    <link rel="stylesheet" th:href="@{/css/gloable.css}"/>
    <link rel="stylesheet" th:href="@{/css/nprogress.css}"/>
    <link rel="stylesheet" th:href="@{/css/blog.css}"/>
    <link th:href="@{/wangEditor/style.css}" rel="stylesheet" type="text/css">
    <!-- 引入依赖 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/css/share.min.css">

    <style type="text/css">
        .social-share .social-share-icon{width: 50px !important;height: 50px !important;line-height: 50px !important;margin-left: 0.5rem;}
        .share_title{color:#c01414;text-align: center;}
    </style>
</head>
<body>
<div class="header" >
</div>
<div th:replace="comm/Wl2022-Comm :: #commHeader"></div>
<div class="doc-container" id="doc-container">
    <div class="container-fixed">
        <div class="col-content" style="width:100%">
            <div class="inner">
                <article class="article-list">
                    <section class="article-item">
                        <aside class="title" style="line-height:1.5;">
                            <h4>[[${article.title}]]</h4>
                            <p class="fc-grey fs-14">
                                <small>
                                    作者：<a target="_blank" class="fc-link">[[${article.createBy}]]</a>
                                </small>
                                <small class="ml10">围观群众：<i class="readcount">[[${article.views}]]</i></small>
                                <small class="ml10">更新于 <label>[[${#dates.format(article.createDate,'yyyy-MM-dd
                                    HH:mm:ss')}]]</label> </small>
                            </p>
                        </aside>
                        <div class="time mt10" style="padding-bottom:0;">
                            <span class="day">[[${#dates.day(article.createDate)}]]</span>
                            <span class="month fs-18">[[${#dates.month(article.createDate)}]]<small
                                    class="fs-14">月</small></span>
                            <span class="year fs-18">[[${#dates.year(article.createDate)}]] </span>
                        </div>
                        <div class="content artiledetail"
                             style="border-bottom: 1px solid #e1e2e0; padding-bottom: 20px;">
                            <!--创建空白编辑器-->
                            <div id="editor-content-view"></div>
                            <div class="copyright mt20">
                                <p class="f-toe fc-black">
                                    非特殊说明，本文版权归 [[${article.createBy}]] 所有，转载请注明出处.
                                </p>
                                <p class="f-toe">
                                    本文标题：
                                    <a href="javascript:void(0)" class="r-title">[[${article.title}]]</a>
                                </p>
                                <p class="f-toe">
                                    [[${article.quoteLink} eq ''?本文网址:引用链接]]
                                    <a th:href="@{/read/{articleId}/{articleType}(articleId=${article.id},articleType=${article.articleType})}" th:if="${article.quoteLink}==''">
                                        http://47.115.229.171:5527[[@{/read/{articleId}/{articleType}(articleId=${article.id},articleType=${article.articleType})}]]
                                    </a>
                                    <a th:href="${article.quoteLink}" th:if="${article.quoteLink}!=''">
                                        [[${article.quoteLink}]]
                                    </a>
                                </p>
                            </div>
                            <div id="aplayer" style="margin:5px 0"></div>
                            <h6>延伸阅读</h6>
                            <ol class="b-relation">
                                <!--当进入详情页的时候将所有该种类中点赞量最大的两个都封装在一个集合中，当本文章是其中一个的时候，显示另一个，不然都显示-->
                                <li th:if="${mostPopularArticlesByType.id} != ${article.id}"
                                    th:each="mostPopularArticlesByType : ${mostPopularArticlesByTypes}">
                                    <a th:href="@{/read/{articleId}/{articleType}(articleId=${mostPopularArticlesByType.id},articleType=${mostPopularArticlesByType.articleType})}">[[${mostPopularArticlesByType.title}]]</a>
                                </li>
                            </ol>
                        </div>

                        <div class="bdsharebuttonbox share" data-tag="share_1">
                            <ul id="articleSharing">
                                <li class="f-praise"><span><a class="s-praise"></a></span></li>
                                <li class="f-qzone"><span id="doShare">...</span></li>
                            </ul>
                        </div>
                        <div id="share_box" style="display:none;">
                            <div style="height: 55%;pointer-events: none;" ></div>
                            <h1 class="share_title">分享到</h1>
                            <div class="social-share" data-initialized="true" style="text-align: center;">
                                <a href="#" class="social-share-icon icon-wechat"></a>
                                <a href="#" class="social-share-icon icon-qq"></a>
                                <a href="#" class="social-share-icon icon-qzone"></a>
                            </div>
                        </div>
                        <div class="f-cb"></div>
                        <div class="mt20 f-fwn fs-24 fc-grey comment"
                             style="border-top: 1px solid #e1e2e0; padding-top: 20px;">
                        </div>

                        <!--评论功能整体-->
                        <fieldset class="layui-elem-field layui-field-title">
                            <legend>发表评论</legend>
                            <div class="layui-field-box">
                                <div class="leavemessage" style="text-align:initial">
                                    <!-- 这里是评论区，留言提交的信息，有，文章id，用户id，留言内容三个，功能就是将留言保存到数据库-->
                                    <form class="layui-form">
                                        <input type="hidden" name="articleId" th:id="articleId"
                                               th:value="${article.id}==null?0:${article.id}">
                                        <!--只有登陆了的才可以评论（提交回复表单之前，先校验loginUser是否为空）-->
                                        <input type="hidden" name="userId" id="userId"
                                               th:value="${session.loginUserId}">
                                        <!-- 评论区域-->
                                        <div class="layui-form-item">
                                                <textarea οnchange="this.value=this.value.substring(0, 200)"
                                                          οnkeydοwn="this.value=this.value.substring(0, 200)"
                                                          οnkeyup="this.value=this.value.substring(0, 200)"
                                                          name="remarkEditor" id="remarkEditor" maxlength="200"
                                                          placeholder="请输入内容(200字)..."
                                                          rows="5"
                                                          class="layui-textarea"></textarea>
                                            <!--  提交留言功能，判断session中是否有loginUser，没有则触发弹框事件，有就提示提交成功，局部刷新页面-->
                                            <div class="layui-form-item">
                                                <button class="layui-btn layui-btn-primary layui-border-blue"
                                                        th:id="submitOne" lay-filter="submitOne" lay-submit>
                                                    提交留言
                                                </button>
                                            </div>
                                        </div>
                                        <!--  ================ END！！！===========-->
                                    </form>
                                </div>
                            </div>
                        </fieldset>

                        <!-- 这里是评论列表-->
                        <ul class="blog-comment" id="blog-comment">
                            <div th:id="originList" th:fragment="list">
                                <!-- 循环开始-->
                                <li th:if="${session.originList}!=null" th:each="origin : ${session.originList}">
                                    <!-- 一级评论-->
                                    <div class="comment-parent">
                                        <a th:name="|remark${origin.id}|"></a>
                                        <!--头像-->
                                        <img th:src="@{|/image/userImage/${origin.headImage}|}"
                                             th:alt="${origin.nickName}">
                                        <!--用户账号-->
                                        <div class="info"><span class="username">[[${origin.nickName}]] <span
                                                th:if="${origin.reviewerIdentity}==1"
                                                class="layui-badge layui-bg-orange">管理员</span></span>
                                        </div>
                                        <!--评论内容-->
                                        <div class="comment-content">[[${origin.content}]]</div>
                                        <!--创建时间-->
                                        <p class="info info-footer">
                                            <span class="comment-time">[[${#dates.format(origin.createTime)}]]</span>
                                            <a href="javascript:;" class="btn-reply" th:data-targetid="${origin.id}"
                                               th:data-targetname="${origin.nickName}">回复</a>
                                        </p>
                                    </div>
                                    <hr>
                                    <!--二级评论和多级评论-->
                                    <!--循环开始-->
                                    <div class="comment-child" th:each="child:${origin.getReplyComments()}"
                                         th:if="${origin.getReplyComments()}!=null">
                                        <a th:name="|reply${child.getId()}|"> </a>
                                        <!--用户头像-->
                                        <img th:src="@{|/image/userImage/${child.getHeadImage()}|}"
                                             th:alt="${child.getNickName()}">
                                        <div class="info">
                                            <!--用户账号-->
                                            <span class="username">[[${child.getNickName()}]] <span
                                                    th:if="${child.reviewerIdentity}==1"
                                                    class="layui-badge layui-bg-orange">管理员</span></span>

                                            <span style="padding-right:0;margin-left:-5px;">回复</span>
                                            <!-- 父姓名-->
                                            <span class="username">[[${child.getParentNickName()}]]</span>
                                            <!--回复内容-->
                                            <span>[[${child.getContent()}]]</span>
                                        </div>
                                        <p class="info">
                                            <span class="comment-time">[[${#dates.format(child.getCreateTime())}]]</span>
                                            <a href="javascript:;" class="btn-reply" th:data-targetid="${child.getId()}"
                                               th:data-targetname="${child.getNickName()}">回复</a>
                                        </p>
                                    </div>
                                    <div class="replycontainer layui-hide">
                                        <!--回复框-->
                                        <form class="layui-form">
                                            <!--                                            回复时记录文章id，用户id，评论内容，被回复的评论的id-->
                                            <input type="hidden" name="remarkId" th:value="${session.loginUserId}">
                                            <input type="hidden" name="targetCommentId" value="">
                                            <!--输入框，当点击回复时打开，收起时关闭-->
                                            <div class="layui-form-item">
                                            <textarea name="replyContent"
                                                      οnchange="this.value=this.value.substring(0, 200)"
                                                      οnkeydοwn="this.value=this.value.substring(0, 200)"
                                                      οnkeyup="this.value=this.value.substring(0, 200)"
                                                      maxlength="100"
                                                      placeholder=""
                                                      class="layui-textarea"
                                                      style="min-height:80px;"></textarea>
                                            </div>
                                            <!--提交按钮-->
                                            <div class="layui-form-item">
                                                <button class="layui-btn layui-btn-radius layui-btn-normal"
                                                        lay-submit="formReply" lay-filter="formReply">
                                                    提交
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </li>
                            </div>
                        </ul>
                        <div class="layui-flow-more">没有更多了</div>
                        <!-- 评论功能结束-->
                    </section>
                </article>
            </div>
        </div>
    </div>
</div>
<div th:replace="comm/Wl2022-Comm::#commFooter"></div>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/wangEditor/index.js}"></script>
<script th:src="@{/js/yss/gloable.js}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/js/social-share.min.js"></script>

<script th:src="@{/js/plugins/nprogress.js}"></script>

<script>NProgress.start();</script>
<script>
    window.onload = function () {
        NProgress.done();
    };
</script>

<script>

</script>


<script>
    /**
     * @function unescapeHTML 还原html脚本 < > & " '
     * @param text
     */
    function unescapeHTML(text) {
        //1.首先动态创建一个容器标签元素，如DIV
        let temp = document.createElement("divs");
        //2.然后将要转换的字符串设置为这个元素的innerHTML(ie，火狐，google都支持)
        temp.innerHTML = text;
        //3.最后返回这个元素的innerText(ie支持)或者textContent(火狐，google支持)，即得到经过HTML解码的字符串了。
        const output = temp.innerText || temp.textContent;
        temp = null;
        return output;
    }

    //文章内容的设置
    const html = unescapeHTML("[[${article.articleContent}]]");
    document.getElementById('editor-content-view').innerHTML = html

</script>
<script>
    const summary="[[${article.summary}]]";
    const $config = {
        url                 : '@{/read/{articleId}/{articleType}(articleId=${article.id},articleType=${article.articleType})}', // 网址，默认使用 window.location.href
        source              : 'wl2022', // 来源（QQ空间会用到）, 默认读取head标签：<meta name="site" content="http://overtrue" />
        title               : '[[${article.title}]]', // 标题，默认读取 document.title 或者 <meta name="title" content="share.js" />
        description         :   summary,
        image               : '[[${article.image}]]', // 图片, 默认取网页中第一个img标签
        wechatQrcodeTitle   : '微信扫一扫：分享', // 微信二维码提示文字
        wechatQrcodeHelper  : '<p>微信里点“发现”，扫一下</p><p>二维码便可将本文分享至朋友圈。</p>'
    };
    socialShare('.social-share-cs', $config);

    layui.use(['jquery', 'form', 'layer'], function () {
        const $ = layui.jquery;
        const form = layui.form;
        const layer = layui.layer;

        layer.ready(function(){
            //弹出页面层
            $('#doShare').on('click', function () {
                layer.open({
                    // type: 1
                    // ,
                    title: '分享',
                    content: $('#share_box').html()
                    ,
                    anim: 'up'
                    ,
                    area: screen() < 2 ? ['800px', '600px'] : ['600px', '450px'],
                });
                //判断浏览器大小方法
                function screen() {
                    //获取当前窗口的宽度
                    const width = $(window).width();
                    if (width > 1200) {
                        return 3;   //大屏幕
                    } else if (width > 992) {
                        return 2;   //中屏幕
                    } else if (width > 768) {
                        return 1;   //小屏幕
                    } else {
                        return 0;   //超小屏幕
                    }
                }
            })
        })

        form.on("submit(formReply)", function (data) {
            const field = data.field;
            let remarkId = field.remarkId;
            let replyContent = field.replyContent;
            let targetCommentId = field.targetCommentId;
            let articleId = "[[${article.id}]]";

            if ((remarkId === "") || remarkId === null) {
                layer.msg('请先登录', {icon: 7});
            } else {
                if ((replyContent === "" || replyContent === null)) {
                    layer.msg('评论信息不能为空！', {icon: 5});
                } else {
                    //当评论内容不为空时
                    $.ajax({
                        type: 'Post',
                        url: '[[@{/comment/replayArticle2}]]',
                        data: {
                            remarkId: remarkId,
                            replyContent: replyContent,
                            targetCommentId: targetCommentId,
                            articleId: articleId
                        },
                        success: function (data) {
                            $("#originList").html(data);
                        },
                        complete: function () {
                            $('.layui-textarea').val('');
                            layer.open({
                                title: '提交成功',
                                content: '提交成功',
                                icon: 6,
                            });
                        },
                        error: function () {
                            layer.open({
                                title: '提交错误',
                                content: '程序故障！留言提交出现异常（请在网站下方联系管理员）',
                                icon: 5
                            });
                            $('.layui-textarea').val('');
                        }
                    })
                }
            }
            return false;
        });


        form.on('submit(submitOne)', function () {
            let articleId = $("#articleId").val();
            let userVal = $("#userId").val();
            let contentVal = $('#remarkEditor').val();
            //当userVal不为空，代表已经登录
            console.log(userVal);
            if ((userVal === "") || userVal === null) {
                layer.msg('请先登录', {icon: 7});
            } else {
                if ((contentVal === "" || contentVal === null)) {
                    layer.msg('评论信息不能为空！', {icon: 5});
                } else {
                    //当评论内容不为空时
                    $.ajax({
                        type: 'Post',
                        url: '[[@{/comment/replayArticle}]]',
                        data: {
                            articleId: articleId,
                            userId: userVal,
                            content: contentVal
                        },
                        success: function (data) {
                            $("#originList").html(data);
                        },
                        complete: function () {
                            $('#remarkEditor').val('');
                            layer.open({
                                title: '提交成功',
                                content: '提交成功',
                                icon: 6,
                            });
                        },
                        error: function () {
                            layer.open({
                                title: '提交错误',
                                content: '程序故障！留言提交出现异常（请在网站下方联系管理员）',
                                icon: 5
                            });
                            $("#remarkEditor").val('');
                        }
                    })
                }
            }
            // 防止页面一闪而过，没有提示信息
            return false;
        });
        //回复按钮点击事件
        $('#blog-comment').on('click', '.btn-reply', function () {
            const targetId = $(this).data('targetid')
                , targetName = $(this).data('targetname')
                , $container = $(this).parent('p').parent().siblings('.replycontainer');
            if ($(this).text() === '回复') {
                $container.find('textarea').attr('placeholder', '回复【' + targetName + '】');
                $container.removeClass('layui-hide');
                $container.find('input[name="targetCommentId"]').val(targetId);
                $(this).parents('.blog-comment li').find('.btn-reply').text('回复');
                $(this).text('收起');
            } else {
                $container.addClass('layui-hide');
                $container.find('input[name="targetCommentId"]').val(0);
                $(this).text('回复');
            }
        });

        let flag = true;
        <!--点赞逻辑-->
        $('#articleSharing').on('click', ".s-praise", function () {
            let aId = '[[${article.id}]]';
            let uId = '[[${session.loginUserId}]]';
            if (!(uId === "" || uId == null)) {
                //如果是第一次点赞，那就为true，显示点赞成功，显示+1
                $.ajax({
                    type: 'get',
                    url: '[[@{/user/setLike}]]',
                    data: {
                        articleId: aId,
                        userId: uId
                    },
                    success: function (s) {
                        console.log(s);
                    },
                    complete: function () {
                        if (flag) {
                            //如果是第一次点赞，那就为true，显示点赞成功，显示+1
                            layer.msg('点赞成功', {icon: 1});
                            flag = false;
                        } else {
                            layer.msg('取消点赞', {icon: 2});
                            flag = true;
                        }
                    },
                    error: function () {
                        layer.open({
                            title: '错误',
                            content: '程序故障！点赞出现异常（请在网站下方联系管理员）',
                            icon: 5
                        });
                    }
                });
            } else {
                layer.msg('请先登录', {icon: 7});
            }
        });
    });
</script>
</body>
</html>
